<template>
	<div class="billingHistoryPage">
		<el-card class="card-box" shadow="never">
			<div class="head">
				<h1>{{ historyInfo.projectName }}</h1>
			</div>
			<div class="info-box">
				<el-form>
					<el-row>
						<el-col :span="6">
							<el-form-item class="form-item-margin_bottom" label="合同名称:">
								<span>{{ historyInfo.contractName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="2"></el-col>
						<el-col :span="6">
							<el-form-item class="form-item-margin_bottom" label="合同编号:">
								<span>{{ historyInfo.contractId }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="2"></el-col>
						<el-col :span="6">
							<el-form-item class="form-item-margin_bottom" label="合同类型:">
								<span>{{
									["", "新签", "续签", "退租"][historyInfo.contractType]
								}}</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item class="form-item-margin_bottom" label="资产名称:">
								<span>{{ historyInfo.assetsName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="2"></el-col>
						<el-col :span="6">
							<el-form-item class="form-item-margin_bottom" label="位置:">
								<span>{{ historyInfo.street }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="2"></el-col>
						<el-col :span="6">
							<el-form-item class="form-item-margin_bottom" label="承租方:">
								<span>{{ historyInfo.customerNames }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4.5">
							<el-form-item class="form-item-margin_bottom" label="面积:">
								<span>{{ historyInfo.leaseTotalArea }}</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item
								class="form-item-margin_bottom"
								label="已缴/合同金额:"
							>
								<span>{{
									(historyInfo.paidContractTotalPrice || 0) +
									"/" +
									historyInfo.contractTotalPrice
								}}</span>
							</el-form-item>
						</el-col>
						<el-col :span="2"></el-col>
						<el-col :span="6">
							<el-form-item
								class="form-item-margin_bottom"
								label="已履期数/合同期数:"
							>
								<span>{{
									historyInfo.contractPaidPeriodsNum +
									"/" +
									historyInfo.contractPeriodsNum
								}}</span>
							</el-form-item>
						</el-col>
						<el-col :span="2"></el-col>
						<el-col :span="6">
							<el-form-item class="form-item-margin_bottom" label="服务期限:">
								<span>{{
									historyInfo.signStartTime + "/" + historyInfo.signEndTime
								}}</span>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</el-card>

		<el-tabs
			v-model="activeName"
			type="card"
			class="demo-tabs tabs-box"
			@tab-click="handleClick"
		>
			<el-tab-pane label="开票历史" name="tab1">
				<public-table
					:page="page"
					:index="false"
					:isPaging="page.total > 0"
					:tableData="tableData2"
					:tableOption.sync="tableOption2"
					@page-change="onPageChange"
				>
				</public-table>
			</el-tab-pane>
			<el-tab-pane label="应收核销历史" name="tab2">
				<div class="table-wrap">
					<public-table
						:index="false"
						:isPaging="false"
						:tableData="tableData"
						:tableOption.sync="tableOption"
					>
					</public-table>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { leaseApi } from "@/api/lease";
import { ref, onMounted, reactive } from "vue";
import {
	ElCard,
	ElForm,
	ElFormItem,
	ElRow,
	ElCol,
	ElTabs,
	ElTabPane,
} from "element-plus";
import { useRouter } from "vue-router";
import PublicTable from "@/components/PublicTable";

const activeName = ref("tab1");

const router = useRouter();
const contractId = router.currentRoute.value.params.contractId;
const historyInfo = ref({});
const page = reactive({
	total: 0,
	current: 1,
	size: 10,
});
const tableData = ref([]);
const tableData2 = ref([]);

const tableOption = ref([
	{ label: "期数 ", prop: "numberOfPeriods" },
	{ label: "部门 ", prop: "departmentName" },
	{ label: "核收人  ", prop: "userName" },
	{ label: "核收时间 ", prop: "collectionTime" },
	{ label: "实收 ", prop: "receivedRent" },
	{
		label: "核收类型 ",
		prop: "collectionType",
		formatter: (val, row) => {
			let arr = ["", "租金", "押金", "退款"];
			return arr[val] || "-";
		},
	},
	{
		label: "支付时间",
		prop: "",
		align: "center",
		formatter: (val, row) => {
			if (row.payStartTime) {
				return row.payStartTime + "-" + row.payEndTime;
			}
			return "-";
		},
	},
	{
		label: "付款类型 ",
		prop: "payType",
		align: "center",
		formatter: (val, row) => {
			let arr = ["", "月", "季", "半年", "年"];
			return arr[val] || "-";
		},
	},
]);

const tableOption2 = ref([
	{ label: "发票编号 ", prop: "invoiceId" },
	{ label: "发票抬头 ", prop: "invoiceHeader" },
	{ label: "地址 ", prop: "invoiceAddress" },
	{ label: "税号 ", prop: "dutyParagraph" },
	{ label: "电话 ", prop: "invoicePhone" },
	{ label: "开户行 ", prop: "openingBank" },
	{ label: "银行账户 ", prop: "bankAccount" },
	{
		label: "类型 ",
		prop: "type",
		align: "center",
		formatter: (val, row) => {
			let arr = ["", "专票", "普票"];
			return arr[val] || "-";
		},
	},
	{ label: "金额 ", prop: "amount" },
	{
		label: "待开票 ",
		prop: "type",
		align: "center",
		formatter: (val, row) => {
			let arr = ["", "待开票", "作废中", "已开", "已作废"];
			return arr[val] || "-";
		},
	},
	{ label: "开始时间 ", prop: "startTime" },
	{ label: "结束时间 ", prop: "endTime" },
	{ label: "财务开票人 ", prop: "financialUserName", width: 120 },
	{ label: "开票请求人 ", prop: "createUserName", width: 120 },
	{ label: "开票时间 ", prop: "invoicingTime" },
	{ label: "作废原因 ", prop: "reasonForCancellation" },
	{
		label: "状态 ",
		prop: "status",
		align: "center",
		formatter: (val, row) => {
			let arr = ["", "待开", "作废中", "红冲中", "已开", "已开且红冲", "作废"];
			return arr[val] || "-";
		},
	},
]);

//租赁管理-->核销历史
const getCollectionHistory = () => {
	leaseApi
		.getCollectionHistory({
			contractId: contractId,
		})
		.then((res) => {
			historyInfo.value = res.data;
			tableData.value = res.data.list || [];
		});
};

// 查看开票历史
const getInvoiceList = (params) => {
	leaseApi.getInvoiceList(params).then((res) => {
		if (res.code == 200) {
			page.total = res.data.totalSize;
			tableData2.value = res.data.content;
		}
	});
};

// 开票历史分页事件
const onPageChange = (e) => {
	page.current = e.page;
	page.size = e.limit;
	let param = {
		pageNum: page.current,
		pageSize: page.size,
	};
	getInvoiceList(param);
};

// el-tabs被点击
const handleClick = (e) => {
	tableData.value = [];
	switch (e.index) {
		case "0":
			page.current = 1;
			getInvoiceList({
				pageNum: 1,
				pageSize: 10,
				param: contractId,
			});
			break;
		case "1":
			getCollectionHistory();
			break;
	}
};

onMounted(() => {
	getInvoiceList({
		pageNum: 1,
		pageSize: 10,
		param: contractId,
	});
	getCollectionHistory();
});
</script>

<style>
.demo-tabs > .el-tabs__content {
	padding: 32px;
}
</style>

<style lang="scss" scoped>
.billingHistoryPage {
	width: 100%;
	.form-item-margin_bottom {
		margin-bottom: 0 !important;
	}
	.card-box {
		width: 90%;
	}
	.tabs-box {
		margin-top: 50px;
	}
}
</style>
